<template>
	<view class="page-container">
		<!-- 顶部图片以及信息 -->
		<view class="header-container">
			<view class="header">
				<!-- 背景图像 -->
				<image class="header-image" :src="homestayImage"></image>
				<!-- 返回图标 -->
				<image class="back-icon" src="../../static/全局图标/返回箭头.png" @click="goBack"></image>
				<view class="header-tags">
					<!-- 如果 featuresInfoList 不为空，显示 "特色民宿" -->
					<image src="../../static/全局图标/星星.png" class="tags-icon" />{{ homestayType }}
				</view>
			</view>
			<!-- 酒店信息 -->
			<view class="hotel-info">
				<!-- 酒店名称和地址 -->
				<view class="hotel-name-location">
					<text class="hotel-name">{{homestayName}}</text>
					<text class="hotel-location">{{homestayAddress}}</text>
					<text class="hotel-location-details">花溪大学城13街道12号</text>
				</view>
				<!-- 地图图标 -->
				<image src="/static/全局图标/地图图标.png" class="map-icon" @click="goToMap" /> <!-- 添加点击事件 -->
			</view>
			<!-- 分割线 -->
			<view class="divider"></view>
			<!-- 酒店评分评价 -->
			<view class="hotel-score-num">
				<text class="hotel-score">{{ score }}分</text>
				<text class="hotel-score-desc">{{ overallRating }}</text>
				<text class="hotel-num">{{ num }}条点评</text>
			</view>
			<!-- 分割线 -->
			<view class="divider-small"></view>
			<!-- 日期选择器 -->
			<view class="calendar">
				<calendar @change="change" :daysCount="daysCount">
				</calendar>
			</view>
			<!-- 分割线 -->
			<view class="divider-small"></view>
		</view>
		<!-- 房间卡片 -->
		<view class="room-list">
			<view class="room-card" v-for="room in roomList" :key="room.roomId">
				<!-- 酒店图片 -->
				<image class="room-image" :src="room.pictures" />
				<!-- 酒店内容 -->
				<view class="room-content">
					<view class="room-header">
						<text class="room-type">{{ room.type }}</text>
						<!-- 尺寸和床型 -->
						<view class="room-size-summary">
							<text class="room-size">{{ room.size }}平米</text>
							<text>{{ room.summary }}</text>
						</view>
					</view>
					<!-- 标签 -->
					<view class="tags-container">
						<view class="tag">闪住</view>
						<view class="tag">预约发票</view>
					</view>
					<!-- 价格和预订按钮 -->
					<view class="price-booking-container">
						<text class="free-cancellation">免费取消</text>
						<view class="price-booking">
							<text class="current-price">￥{{ room.currentPrice }}</text>
							<view class="booking-button">预订</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="global-divider"></view>
		<!-- 酒店特色部分，仅当 featuresInfoList 不为空时显示 -->
		<view class="amenities-section" v-if="featuresInfoList.length > 0">
			<view class="amenities-header">
				<text>酒店特色</text>
				<view>
					<text class="view-more">查看详情</text>
					<image src="../../static/全局图标/更多.png" class="more-icon" />
				</view>
			</view>
			<view class="global-divider"></view>
			<!-- 特色信息容器 -->
			<view class="amenities-feature-container" v-for="(feature, index) in amenitiesFeatures" :key="index">
				<view class="feature-name">
					<text class="feature-intro-text">{{ feature.name }}</text>
				</view>
				<view class="feature-type">
					<text class="feature-intro-text">{{ feature.type }}</text>
				</view>
				<!-- 图片行容器 -->
				<view class="amenities-images">
					<!-- 循环遍历每个特色的图片，显示前两张 -->
					<view v-for="(image, idx) in feature.pictureList.slice(0, 2)" :key="idx"
						class="amenity-image-wrapper">
						<image class="amenity-image" :src="image"></image>
					</view>
				</view>
				<!-- 描述文本 -->
				<view class="feature-intro">
					<text class="feature-intro-text">{{ feature.depict }}</text>
				</view>
			</view>
			<view class="global-divider"></view>
		</view>
		<!-- WIFI等图标部分 -->
		<view class="amenities-list">
			<view class="amenity-item" v-for="amenity in amenities" :key="amenity.id">
				<image :src="amenity.iconUrl" class="amenity-icon"></image>
				<text class="amenity-text">{{ amenity.name }}</text>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="global-divider"></view>
		<!-- 订单必读部分 -->
		<view class="policies-section">
			<text class="title">订房政策</text>
			<view class="time-details">
				<image src="../../static/民宿详情图标/时钟.png" class="icon-clock" />
				<text class="check-in-out">入住时间: 14:00以后 离店时间: 12:00以前</text>
			</view>
			<view class="children-details">
				<image src="../../static/民宿详情图标/儿童.png" class="icon-info" />
				<text class="description">儿童及加床</text>
			</view>
			<view class="details">
				酒店允许携带儿童入住每间客房最多容纳1名3-16岁儿童，不另外加床，和成人共用现有床铺。每间客房最多容纳1张婴儿床。酒店不提供加床...
			</view>
			<view class="policies-footer">
				<text class="more-details">全部酒店政策</text>
				<view class="icons-container">
					<image src="../../static/民宿详情图标/停车场2.png" />
					<image src="../../static/民宿详情图标/餐厅.png" />
					<image src="../../static/民宿详情图标/银行卡.png" />
					<image src="../../static/全局图标/更多.png" />
				</view>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="global-divider"></view>
		<!-- 评价部分 -->
		<view class="review-section">
			<view class="review-title">住客评价</view>
			<view class="review-scores-container">
				<view class="review-summary-container">
					<view class="review-average-score">{{ score }}分</view>
					<view class="review-overall-rating">{{ overallRating }}</view>
				</view>
				<view class="review-detailed-scores">
					<text v-for="(score, category) in detailedScores" :key="category">
						{{ category }} {{ score }}
					</text>
				</view>
			</view>
			<view class="review-tags">
				<view v-for="tag in tags" :key="tag" class="review-tag">{{ tag }}</view>
			</view>
			<view class="user-review-container">
				<view class="user-info">
					<view class="user-avatar"></view>
					<view class="user-name">{{ userName }}</view>
					<view class="user-tag">{{ userTag }}</view>
				</view>
				<view class="user-review-content">{{ userReview }}</view>
			</view>
			<view class="global-divider"></view>
			<view class="review-section-footer">
				<text>全部真实客户评价 · 22695条</text>
				<image src="../../static/全局图标/更多.png" class="footer-arrow" />
			</view>
		</view>
		<!-- 分割线 -->
		<view class="global-divider"></view>
		<!-- 页面底部部分 -->
		<view class="footer-container">
			<view class="footer-item">
				<image src="../../static/民宿详情图标/客服.png" class="footer-icon" />
				<text>电话咨询</text>
			</view>
			<view class="footer-item">
				<image src="../../static/民宿详情图标/收藏.png" class="footer-icon" />
				<text>收藏</text>
			</view>
			<button class="more-info-btn" @click="goBack">更多民宿</button>
		</view>
	</view>
</template>


<script>
	import calendar from '@/components/date-picker/date-picker';


	export default {
		data() {
			return {
				//顶部信息部分
				homestayImage: '',
				homestayName: '', //酒店名称
				homestayAddress: '', //酒店地址
				score: '', //评论平均分
				num: '', //评论数
				featuresInfoList: [], // 用于判断顶部标签显示内容
				//酒店特色部分
				featureIntroText: '', //酒店特色简介
				//图片基础前部URL
				baseImageUrl: 'http://localhost:8086/business/common2/download?name=', // 后端图片的基础路径
				//评价部分
				detailedScores: {
					'干净度': '4.8',
					'舒适度': '4.7',
					'服务': '4.7',
					'设施': '4.7'
				},
				tags: ['卫生棒(3122)', '服务周到(2177)'],
				userName: '张三',
				userTag: 'VIP客户',
				userReview: '这家酒店非常干净，服务态度也很好，下次还会再来。这家酒店非常干净，服务态度也很好，下次还会再来。这家酒店非常干净，服务态度也很好，下次还会再来。这家酒店非常干净，服务态度也很好，下次还会再来。',

				//酒店特色部分
				amenitiesFeatures: [], // 用于存储特色图片的 URL和内容简介
				amenities: [{
						id: 1,
						name: '免费WiFi',
						iconUrl: '../../static/民宿详情图标/WIFI.png' // Replace with the path to your WiFi icon
					},
					{
						id: 2,
						name: '停车场',
						iconUrl: '../../static/民宿详情图标/健身房.png' // Replace with the path to your Parking icon
					},
					{
						id: 3,
						name: '健身房',
						iconUrl: '../../static/民宿详情图标/停车场1.png' // Replace with the path to your Gym icon
					},
					{
						id: 4,
						name: '游泳池',
						iconUrl: '../../static/民宿详情图标/游泳池.png' // Replace with the path to your Pool icon
					},
					// Add more amenities as needed
				],

				//日期选择器
				showCaledar: false,
				daysCount: 130,
				// 房间列表
				roomList: [],
			};
		},
		// ...其他选项...
		components: {
			calendar
		},
		onLoad(options) {
			// 获取从列表页传递过来的酒店ID
			const hotelId = options.hotelId;
			// 然后使用hotelId来从后端获取数据
			this.fetchHotelDetails(hotelId);
		},
		computed: {
			overallRating() {
				const score = parseFloat(this.score);
				if (score >= 4.8) {
					return '非常好';
				} else if (score >= 4.5) {
					return '很好';
				} else if (score >= 4.0) {
					return '好';
				} else if (score >= 3.5) {
					return '一般';
				} else {
					return '较差';
				}
			},
			// 计算属性判断民宿类型
			homestayType() {
				return this.featuresInfoList.length > 0 ? '特色民宿' : '普通民宿';
			}
		},
		methods: {
			fetchHotelDetails(hotelId) {
				uni.request({
					url: 'http://localhost:8086/business/homestayInfo/getHomestayInfo/' + hotelId,
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200 && res.data && res.data.data) {
							const data = res.data.data;
							// 更新 homestayImage
							this.homestayImage = this.baseImageUrl + data.pictures;
							// 更新 homestayName
							this.homestayName = data.homestayName;
							// 更新 homestayAddress
							this.homestayAddress = data.homestayAddress;
							// 更新 score
							this.score = data.score;
							// 更新 num
							this.num = data.num;
							// 更新 featuresInfoList
							this.featuresInfoList = data.featuresInfoList || [];
							// 更新房间列表
							this.roomList = data.roomInfoList.map(room => ({
								...room,
								pictures: this.baseImageUrl + room.roomPictures,
								type: room.roomTypeName,
								size: room.size, // 您需要根据实际数据调整
								summary: room.roomFacility, // 您需要根据实际数据调整
								currentPrice: room.roomPrice
							}));
							// 处理特色信息列表
							this.amenitiesFeatures = data.featuresInfoList.map(feature => {
								return {
									name: feature.featureName,
									type: feature.featureTypeName,
									depict: feature.depict,
									pictureList: feature.pictureList.map(pic => this.baseImageUrl +
										pic)
								};
							});
							// 更新其他民宿信息，如评分、评价等
							this.averageScore = data.score;
							this.reviews = data.thumbNum; // 根据实际情况选择合适的字段
							// 其他需要的数据更新...
						} else {
							uni.showToast({
								title: '获取数据失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			},
			change({
				choiceDate,
				dayCount
			}) {
				//参数解释
				//1.choiceDate 时间区间（开始时间和结束时间）
				//2.dayCount 共多少晚

				// console.log(choiceDate, dayCount);
				console.log('入住从 ' + choiceDate[0].re + ' (星期' + choiceDate[0].week + ')  到 ' + choiceDate[1].re + '(星期' +
					choiceDate[1].week +
					')' + '  共 ' + dayCount + ' 晚 ');
			},
			goBack() {
				uni.navigateTo({
					url: '/pages/hotelList/hotelList',
				});
			},
		}
	};
</script>s


<style lang="scss" scoped>
	@import '../../src/assets/scss/民宿详情/global.scss';
	@import '../../src/assets/scss/民宿详情/header.scss';
	@import '../../src/assets/scss/民宿详情/rooms.scss';
	@import '../../src/assets/scss/民宿详情/special.scss';
	@import '../../src/assets/scss/民宿详情/special-icons.scss';
	@import '../../src/assets/scss/民宿详情/policys.scss';
	@import '../../src/assets/scss/民宿详情/reviews.scss';
	@import '../../src/assets/scss/民宿详情/footer.scss';
</style>